<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<title>老杨</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

		<!-- Link Swiper's CSS -->
		<link rel="stylesheet" type="text/css" href="css/animate.min.css" />
		<link rel="stylesheet" type="text/css" href="css/swiper.min.css" />
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />

		<link rel="stylesheet" type="text/css" href="css/style1.css" />
		<link rel="shortcut icon" href="../favicon.ico">
		<link rel="stylesheet" type="text/css" href="css/demo.css" />
		<link rel="stylesheet" type="text/css" href="css/slicebox.css" />
		<link rel="stylesheet" type="text/css" href="css/custom.css" />
		<script type="text/javascript" src="js/modernizr.custom.46884.js"></script>

		<!-- Demo styles -->
		<style>
			html,
			body {
				position: relative;
				height: 100%;
			}
			
			body {
				background: #eee;
				font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
				font-size: 14px;
				color: #000;
				margin: 0;
				padding: 0;
			}
			
			.swiper-container {
				width: 100%;
				height: 100%;
			}
			
			.swiper-slide {
				text-align: center;
				font-size: 18px;
				background: #fff;
				/* Center slide text vertically */
				display: -webkit-box;
				display: -ms-flexbox;
				display: -webkit-flex;
				display: flex;
				-webkit-box-pack: center;
				-ms-flex-pack: center;
				-webkit-justify-content: center;
				justify-content: center;
				-webkit-box-align: center;
				-ms-flex-align: center;
				-webkit-align-items: center;
				align-items: center;
			}
			
			.big,
			.bigM {
				position: absolute;
				top: 0px;
				left: 0px;
				background: rgba(0, 0, 0, 0.6);
				padding-top: 100px;
				display: none;
				border: 1px solid;
			}
			
			.bigM {
				width: 100%;
				height: 100%;
			}
			
			.close {
				position: absolute;
				top: 20px;
				right: 20px;
				cursor: pointer;
			}
			
			.bigO {
				position: absolute;
				top: 0px;
				left: 0px;
				margin: 50px 20px 0px 50px;
				width: 450px;
				height: 350px;
				cursor: pointer;
			}
			
			.back {
				position: absolute;
				bottom: 20px;
				right: 40px;
				cursor: pointer;
			}
		</style>
	</head>

	<body>
		<audio id="audio" src="music/bk_music.mp3" autoplay="autoplay"  loop="loop" >  </audio>
		<!-- Swiper -->
		<div class="swiper-container swiper-container-v">
			<div class="swiper-wrapper">
				<!--第一屏-->
				<div class="swiper-slide first" data-hash='slide1' style="background-image: url(img/bg/bg1.png);background-size:cover;backgrond-attachment:fixed;background-position:center;">
					<div class="first_l">
						<img src="img/home.png" class="qjf" />
					</div>
					<div class="first_r">
						<img src="img/tree.png" class="ani tree" />
						<div class="bigO"></div>
					</div>
					<div class="apple" style="position: absolute; bottom: 40px; right: 50px;cursor: pointer;">
						<img src="img/apple.png" />
					</div>
					<div class="big">
						<img src="img/bigfamily.jpg" class="bigfamily" />
						<img src="img/close.jpg" class="close" />
					</div>
					<div class="down">
						<img src="img/down.png" />
					</div>
					<div class="bigM">
						<img src="img/mingxinpian.jpg" class="bigfamily" />
						<img src="img/close.jpg" class="close" />
					</div>
				</div>
				<!--第二屏-->
				<div class="swiper-slide second" data-hash='slide2' style="background-image: url(img/bg/bg2.jpg);background-size:cover;backgrond-attachment:fixed;background-position:center;">
					<div class="sed_l">
						<div class="wrapper">
							<ul id="sb-slider" class="sb-slider">
								<li>
									<a href="#"><img src="img/02_sliding/sliding1.jpg" alt="image1" /></a>
								</li>
								<li>
									<a href="#"><img src="img/02_sliding/sliding2.jpg" alt="image1" /></a>
								</li>
								<li>
									<a href="#"><img src="img/02_sliding/sliding3.jpg" alt="image1" /></a>
								</li>
								<li>
									<a href="#"><img src="img/02_sliding/sliding4.jpg" alt="image1" /></a>
								</li>
								<li>
									<a href="#"><img src="img/02_sliding/sliding5.jpg" alt="image1" /></a>
								</li>
							</ul>
						</div>
					</div>
					<div class="sed_r">
						<img class="mom ani" src="img/mom.png" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="0.3s" />
						<img class="boy ani" src="img/boy.png" swiper-animate-effect="slideInUp" swiper-animate-duration="3s" swiper-animate-delay="1s" />
						<img class="girl ani" src="img/girl.png" swiper-animate-effect="slideInRight" swiper-animate-duration="1s" swiper-animate-delay="3.5s" />
						<div class="xfyjr">
							<span>幸</span>
							<span>福</span>
							<span>一</span>
							<span>家</span>
							<span>人</span>
						</div>
					</div>
				</div>

				<!--第三屏-->
				<div class="swiper-slide third" data-hash='slide3' style="background: #FFE4E1">
					<div class="th_left">
						<img src="img/qjf_index.jpg" class="qjf_index" />
					</div>
					<div class="th_right">
						<div class="th_r_top">
							<div class="r_t_1">
								<img src="img/tj_index.jpg" class="tj_index" />
							</div>
							<div class="r_t_2">
								<img src="img/rc_index.jpg" class="rc_index" />
							</div>
						</div>
						<div class="th_r_b">
							<div class="r_t_3">
								<img src="img/jcb_index.jpg" class="jcb_index" />
							</div>
							<div class="r_t_4">
								<img src="img/hy_index.jpg" class="hy_index" />
							</div>
						</div>
					</div>
				</div>

				<!--第四屏-->
				<div class="swiper-slide four" data-hash='slide4' style="background-image: url(img/bg/bg4.jpg);background-size:cover;backgrond-attachment:fixed;background-position:center;">
					<img src="img/back.png" class="back" />
					<div class="pics ani" swiper-animate-effect="zoomOutDown" swiper-animate-duration="1s" swiper-animate-delay="4s">
						<img src="img/tj_index/tj01.jpg" style="top: -250px;left: -300px;" class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s" swiper-animate-delay="0.3s" />
					</div>
					<div class="pics ani" style="transform: rotateZ(30deg);" swiper-animate-effect="zoomOutDown" swiper-animate-duration="1s" swiper-animate-delay="8s">
						<img src="img/tj_index/tj02.jpg" style="top:-300px ;left: -460px;" class="ani" swiper-animate-effect="slideInUp" swiper-animate-duration="2s" swiper-animate-delay="4s" />
					</div>
					<div class="pics ani" style="transform: rotateZ(0deg);" swiper-animate-effect="zoomOutDown" swiper-animate-duration="1s" swiper-animate-delay="12s">
						<img src="img/tj_index/tj03.jpg" style="top: -250px;left: -300px;" class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s" swiper-animate-delay="8s" />
					</div>
					<div class="pics ani" style="transform: rotateZ(0deg);" swiper-animate-effect="zoomOutDown" swiper-animate-duration="1s" swiper-animate-delay="16s">
						<img src="img/tj_index/tj04.jpg" style="top: -300px;left: -270px;" class="ani" swiper-animate-effect="bounceIn" swiper-animate-duration="2s" swiper-animate-delay="12s" />
					</div>
					<div class="pics ani" style="transform: rotateZ(0deg);" swiper-animate-effect="zoomOutDown" swiper-animate-duration="1s" swiper-animate-delay="20s">
						<img src="img/tj_index/tj05.jpg" style="top: -300px;left: -300px;" class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-delay="16s" />
					</div>
					<div class="pics ani" style="transform: rotateZ(15deg);" swiper-animate-effect="zoomOutDown" swiper-animate-duration="1s" swiper-animate-delay="24s">
						<img src="img/tj_index/tj06.jpg" style="top: -250px;left: -320px;" class="ani" swiper-animate-effect="flipInX" swiper-animate-duration="2s" swiper-animate-delay="20s" />
					</div>
					<div class="pics ani" style="transform: rotateZ(20deg);" swiper-animate-effect="zoomOutDown" swiper-animate-duration="1s" swiper-animate-delay="28s">
						<img src="img/tj_index/tj07.jpg" style="top: -250px;left: -300px;" class="ani" swiper-animate-effect="lightSpeedIn" swiper-animate-duration="2s" swiper-animate-delay="24s" />
					</div>
					<div class="pics ani" style="transform: rotateZ(7deg);" swiper-animate-effect="zoomOutDown" swiper-animate-duration="1s" swiper-animate-delay="32s">
						<img src="img/tj_index/tj08.jpg" style="top: -250px;left: -360px;" class="ani" swiper-animate-effect="rotateInDownLeft" swiper-animate-duration="2s" swiper-animate-delay="28s" />
					</div>
					<div class="pics ani" style="transform: rotateZ(3deg);" swiper-animate-effect="zoomOutDown" swiper-animate-duration="1s" swiper-animate-delay="36s">
						<img src="img/tj_index/tj09.jpg" style="top: -300px;left: -350px;" class="ani" swiper-animate-effect="slideInUp" swiper-animate-duration="2s" swiper-animate-delay="32s" />
					</div>
					<div class="pics ani" style="transform: rotateZ(-4deg);" swiper-animate-effect="zoomOutDown" swiper-animate-duration="1s" swiper-animate-delay="40s">
						<img src="img/tj_index/tj10.jpg" style="top: -300px;left: -330px;" class="ani" swiper-animate-effect="zoomInDown" swiper-animate-duration="2s" swiper-animate-delay="36s" />
					</div>
					<div class="pics ani" style="transform: rotateZ(6deg);" swiper-animate-effect="zoomOutDown" swiper-animate-duration="1s" swiper-animate-delay="44s">
						<img src="img/tj_index/tj11.jpg" style="top: -300px;left: -370px;" class="ani" swiper-animate-effect="rollIn" swiper-animate-duration="2s" swiper-animate-delay="40s" />
					</div>
					<div class="pics ani" style="transform: rotateZ(2deg);" swiper-animate-effect="zoomOutDown" swiper-animate-duration="1s" swiper-animate-delay="48s">
						<img src="img/tj_index/tj12.jpg" style="top: -300px;left: -310px;" class="ani" swiper-animate-effect="zoomInUp" swiper-animate-duration="2s" swiper-animate-delay="44s" />
					</div>
					<div class="pics ani" style="transform: rotateZ(8deg);" swiper-animate-effect="zoomOutDown" swiper-animate-duration="1s" swiper-animate-delay="52s">
						<img src="img/tj_index/tj13.jpg" style="top: -250px;left: -330px;" class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s" swiper-animate-delay="48s" />
					</div>
					<div class="pics ani" style="transform: rotateZ(-3deg);" swiper-animate-effect="zoomOutDown" swiper-animate-duration="1s" swiper-animate-delay="56s">
						<img src="img/tj_index/tj14.jpg" style="top: -250px;left: -340px;" class="ani" swiper-animate-effect="flipInY" swiper-animate-duration="2s" swiper-animate-delay="52s" />
					</div>
					<div class="pics ani" style="transform: rotateZ(6deg);" swiper-animate-effect="zoomOutDown" swiper-animate-duration="1s" swiper-animate-delay="60s">
						<img src="img/tj_index/tj15.jpg" style="top: -300px;left: -340px;" class="ani" swiper-animate-effect="fadeInLeftBig" swiper-animate-duration="2s" swiper-animate-delay="56s" />
					</div>
					<div class="pics ani" style="transform: rotateZ(12deg);" swiper-animate-effect="zoomOutDown" swiper-animate-duration="1s" swiper-animate-delay="64">
						<img src="img/tj_index/tj16.jpg" style="top: -250px;left: -350px;" class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s" swiper-animate-delay="60s" />
					</div>
					<div class="pics ani" style="transform: rotateZ(17deg);" swiper-animate-effect="zoomOutDown" swiper-animate-duration="1s" swiper-animate-delay="68s">
						<img src="img/tj_index/tj17.jpg" style="top: -250px;left: -320px;" class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s" swiper-animate-delay="64s" />
					</div>
					<div class="pics ani" style="transform: rotateZ(-3deg);" swiper-animate-effect="zoomOutDown" swiper-animate-duration="1s" swiper-animate-delay="72s">
						<img src="img/tj_index/tj18.jpg" style="top: -300px;left: -350px;" class="ani" swiper-animate-effect="bounceInUp" swiper-animate-duration="2s" swiper-animate-delay="68s" />
					</div>
					<div class="pics ani" style="transform: rotateZ(-13deg);" swiper-animate-effect="zoomOutDown" swiper-animate-duration="1s" swiper-animate-delay="76s">
						<img src="img/tj_index/tj19.jpg" style="top: -300px;left: -360px;" class="ani" swiper-animate-effect="fadeInDownBig" swiper-animate-duration="2s" swiper-animate-delay="72s" />
					</div>
					<div class="pics ani" style="transform: rotateZ(0deg);" swiper-animate-effect="zoomOutDown" swiper-animate-duration="1s" swiper-animate-delay="80s">
						<img src="img/tj_index/tj20.jpg" style="top: -300px;left: -330px;" class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s" swiper-animate-delay="76s" />
					</div>
					<div class="pics ani" style="transform: rotateZ(3deg);" swiper-animate-effect="zoomOutDown" swiper-animate-duration="1s" swiper-animate-delay="84s">
						<img src="img/tj_index/tj21.jpg" style="top: -300px;left: -310px;" class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s" swiper-animate-delay="80s" />
					</div>
					<div class="pics ani" style="transform: rotateZ(25deg);" swiper-animate-effect="zoomOutDown" swiper-animate-duration="1s" swiper-animate-delay="88s">
						<img src="img/tj_index/tj22.jpg" style="top: -250px;left: -280px;" class="ani" swiper-animate-effect="rotateInUpLeft" swiper-animate-duration="2s" swiper-animate-delay="84s" />
					</div>
					<div class="pics ani" style="transform: rotateZ(0deg);" swiper-animate-effect="zoomOutDown" swiper-animate-duration="1s" swiper-animate-delay="92s">
						<img src="img/tj_index/tj23.jpg" style="top: -300px;left: -300px;" class="ani" swiper-animate-effect="slideInRight" swiper-animate-duration="2s" swiper-animate-delay="88s" />
					</div>
					<div class="pics ani" style="transform: rotateZ(15deg);" swiper-animate-effect="zoomOutDown" swiper-animate-duration="1s" swiper-animate-delay="96s">
						<img src="img/tj_index/tj24.jpg" style="top: -250px;left: -320px;" class="ani" swiper-animate-effect="zoomInDown" swiper-animate-duration="2s" swiper-animate-delay="92s" />
					</div>
					<div class="pics ani" style="transform: rotateZ(15deg);" swiper-animate-effect="zoomOutDown" swiper-animate-duration="1s" swiper-animate-delay="100s">
						<img src="img/tj_index/tj25.jpg" style="top: -250px;left: -320px;" class="ani" swiper-animate-effect="zoomInRight" swiper-animate-duration="2s" swiper-animate-delay="96s" />
					</div>
					<div class="pics ani" style="transform: rotateZ(3deg);" swiper-animate-effect="zoomOutDown" swiper-animate-duration="1s" swiper-animate-delay="104s">
						<img src="img/tj_index/tj26.jpg" style="top: -300px;left: -330px;" class="ani" swiper-animate-effect="bounceInUp" swiper-animate-duration="2s" swiper-animate-delay="100s" />
					</div>
					<div class="pics ani" style="transform: rotateZ(16deg);" swiper-animate-effect="zoomOutDown" swiper-animate-duration="1s" swiper-animate-delay="108s">
						<img src="img/tj_index/tj27.jpg" style="top: -250px;left: -310px;" class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="2s" swiper-animate-delay="104s" />
					</div>
					<div class="pics ani" style="transform: rotateZ(2deg);" swiper-animate-effect="zoomOutDown" swiper-animate-duration="1s" swiper-animate-delay="112s">
						<img src="img/tj_index/tj28.jpg" style="top: -300px;left: -320px;" class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s" swiper-animate-delay="108s" />
					</div>
					<div class="pics ani" style="transform: rotateZ(-20deg);" swiper-animate-effect="zoomOutDown" swiper-animate-duration="1s" swiper-animate-delay="116s">
						<img src="img/tj_index/tj29.jpg" style="top: -300px;left: -330px;" class="ani" swiper-animate-effect="rotateInUpRight" swiper-animate-duration="2s" swiper-animate-delay="112s" />
					</div>
					<div class="pics ani" style="transform: rotateZ(0deg);" swiper-animate-effect="zoomOutDown" swiper-animate-duration="1s" swiper-animate-delay="120s">
						<img src="img/tj_index/tj30.jpg" style="top: -250px;left: -340px;" class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s" swiper-animate-delay="116s" />
					</div>
					<div class="pics ani" style="transform: rotateZ(20deg);" swiper-animate-effect="zoomOutDown" swiper-animate-duration="1s" swiper-animate-delay="124s">
						<img src="img/tj_index/tj31.jpg" style="top: -260px;left: -300px;" class="ani" swiper-animate-effect="zoomInRight" swiper-animate-duration="2s" swiper-animate-delay="120s" />
					</div>
					<div class="pics ani" style="transform: rotateZ(10deg);" swiper-animate-effect="zoomOutDown" swiper-animate-duration="1s" swiper-animate-delay="128s">
						<img src="img/tj_index/tj32.jpg" style="top: -300px;left: -330px;" class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s" swiper-animate-delay="124s" />
					</div>
					<div class="pics ani" style="transform: rotateZ(-15deg);" swiper-animate-effect="zoomOutDown" swiper-animate-duration="1s" swiper-animate-delay="132s">
						<img src="img/tj_index/tj33.jpg" style="top: -260px;left: -340px;" class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s" swiper-animate-delay="128s" />
					</div>
					<div class="pics ani" style="transform: rotateZ(20deg);" swiper-animate-effect="zoomOutDown" swiper-animate-duration="1s" swiper-animate-delay="136s">
						<img src="img/tj_index/tj34.jpg" style="top: -250px;left: -300px;" class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-delay="132s" />
					</div>
					<div class="pics ani" style="transform: rotateZ(0deg);" swiper-animate-effect="zoomOutDown" swiper-animate-duration="1s" swiper-animate-delay="140s">
						<img src="img/tj_index/tj35.jpg" style="top: -250px;left: -350px;" class="ani" swiper-animate-effect="fadeInRightBig" swiper-animate-duration="2s" swiper-animate-delay="136s" />
					</div>
					<div class="pics ani" style="transform: rotateZ(0deg);" swiper-animate-effect="zoomOutDown" swiper-animate-duration="1s" swiper-animate-delay="144s">
						<img src="img/tj_index/tj36.jpg" style="top: -300px;left: -364px;" class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s" swiper-animate-delay="140s" />
					</div>
					<div class="pics ani" style="transform: rotateZ(-20deg);" swiper-animate-effect="zoomOutDown" swiper-animate-duration="1s" swiper-animate-delay="148s">
						<img src="img/tj_index/tj37.jpg" style="top: -300px;left: -350px;" class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s" swiper-animate-delay="144s" />
					</div>
				</div>
				<!--第五屏-->
				<div class="swiper-slide" data-hash='slide5' style="background-image: url(img/bg/bg5.jpg);background-size:cover;backgrond-attachment:fixed;background-position:center;">
					<img src="img/back.png" class="back" />
					<img src="img/rc_index/rc1.jpg" id="img" style="border: 10px solid tan; border-left: 80px solid tan; border-right: 80px solid tan;" />
				</div>
				<!--第六屏-->
				<div class="swiper-slide" data-hash='slide6' style="background-image: url(img/bg/bg6.jpg);background-size:cover;backgrond-attachment:fixed;background-position:center;">
					<img src="img/back.png" class="back" />
					<article class="jq22-container">
						<div class="poster-main B_Demo" style="margin-top:100px">
							<div class="poster-btn poster-prev-btn"></div>
							<ul class="poster-list">
								<li class="poster-item">
									<a href="#"><img src="img/hy_index/hy01.jpg" width="100%"></a>
								</li>
								<li class="poster-item">
									<a href="#"><img src="img/hy_index/hy02.jpg" width="100%"></a>
								</li>
								<li class="poster-item">
									<a href="#"><img src="img/hy_index/hy03.jpg" width="100%"></a>
								</li>
								<li class="poster-item">
									<a href="#"><img src="img/hy_index/hy04.jpg" width="100%"></a>
								</li>
								<li class="poster-item">
									<a href="#"><img src="img/hy_index/hy05.jpg" width="100%"></a>
								</li>
								<li class="poster-item">
									<a href="#"><img src="img/hy_index/hy06.jpg" width="100%"></a>
								</li>
								<li class="poster-item">
									<a href="#"><img src="img/hy_index/hy07.jpg" width="100%"></a>
								</li>
							</ul>
							<div class="poster-btn poster-next-btn"></div>
						</div>
					</article>
				</div>
				<!--第七屏-->
				<div class="swiper-slide seven" data-hash='slide7' style="background-image: url(img/bg/bg7.jpg);background-size:cover;backgrond-attachment:fixed;background-position:center;">
					<img src="img/back.png" class="back" />
					<section class="container">
						<div id="slider">
							<img src="img/qjf_index/qjf01.jpg" />
							<img src="img/qjf_index/qjf02.jpg" />
							<img src="img/qjf_index/qjf03.jpg" />
							<img src="img/qjf_index/qjf04.jpg" />
							<img src="img/qjf_index/qjf05.png" />

						</div>
					</section>
				</div>
				<!--第八屏-->
				<div class="swiper-slide eight" data-hash='slide8' style="background: #F6F6F6;">

					<div class="ani01 ani" swiper-animate-effect="slideInUp" swiper-animate-duration="1s" swiper-animate-delay="0.5s">
						<img src="img/ani/ani01.jpg" class="ani" swiper-animate-effect="rotateOut " swiper-animate-duration="1s" swiper-animate-delay="2.5s" />
					</div>
					<div class="ani02 ani" style="top: 50px;left: 50px;" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="4.5s">
						<img src="img/ani/seven01.jpg" class="ani" swiper-animate-effect="fadeOut " swiper-animate-duration="1s" swiper-animate-delay="8s" />
					</div>
					<div class="ani02 ani" style="top:50px ;right: 80px;" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="4.5s">
						<img src="img/ani/seven02.jpg" class="ani" swiper-animate-effect="fadeOut " swiper-animate-duration="1s" swiper-animate-delay="8s" />
					</div>
					<div class="ani02 ani" style="bottom: 100px;left:35%;" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="4.5s">
						<img src="img/ani/seven03.jpg" class="ani" swiper-animate-effect="fadeOut " swiper-animate-duration="1s" swiper-animate-delay="8s" />
					</div>
					<div class="zi01 ani02 ani" style="top: 50px;left:35%;" swiper-animate-effect="fadeOut" swiper-animate-duration="1s" swiper-animate-delay="8s">
						<img src="img/ani/zi01.png" class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="5s" />
					</div>
					<div class="ani02 ani" style="bottom: 30px;left: 38%;" swiper-animate-effect="fadeOut " swiper-animate-duration="1s" swiper-animate-delay="14s">
						<img src="img/ani/fuqi.jpg" class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="10s" />
					</div>
					<div class="ani02 ani" style="bottom: -30px;left: 0px;" swiper-animate-effect="fadeOut " swiper-animate-duration="1s" swiper-animate-delay="24s">
						<img src="img/ani/tit01.png" width="765px" height="100%" class="ani" swiper-animate-effect="slideInLeft" swiper-animate-duration="3s" swiper-animate-delay="13.5s" />
					</div>
					<div class="ani02 ani" style="bottom: -30px;right:0px;" swiper-animate-effect="fadeOut " swiper-animate-duration="1s" swiper-animate-delay="24s">
						<img src="img/ani/tit02.png" width="765px" height="100%" class="ani" swiper-animate-effect="slideInRight9" swiper-animate-duration="3s" swiper-animate-delay="13.5s" />
					</div>
					<div class="ani02 ani" style="bottom: 50px;left: 20%;" swiper-animate-effect="fadeOut " swiper-animate-duration="1s" swiper-animate-delay="24s">
						<img src="img/ani/seven05.png" class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="18s" />
					</div>
					<div class="ani02 ani" style="top: 50px;left: 40px;" swiper-animate-effect="fadeOut " swiper-animate-duration="1s" swiper-animate-delay="24s">
						<img src="img/ani/seven06.png" class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="18s" />
					</div>
					<div class="ani02 ani" style="top: 50px;left: 65%;" swiper-animate-effect="fadeOut " swiper-animate-duration="1s" swiper-animate-delay="24s">
						<img src="img/ani/seven07.png" class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="20s" />
					</div>
					<div class="ani02 ani" style="top: 40%;left: 70%;" swiper-animate-effect="fadeOut " swiper-animate-duration="1s" swiper-animate-delay="24s">
						<img src="img/ani/seven08.png" class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="20s" />
					</div>
					<div class="ani02 ani" style="bottom: 40px;left: 55%;" swiper-animate-effect="fadeOut " swiper-animate-duration="1s" swiper-animate-delay="24s">
						<img src="img/ani/seven09.png" class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="20s" />
					</div>
					<div class="zi01 ani02 ani" style="top: 300px;left:35%;" swiper-animate-effect="fadeOut" swiper-animate-duration="1s" swiper-animate-delay="24s">
						<img src="img/ani/zi02.png" class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="19s" />
					</div>
					<div class="ani02 ani" style="top: 0px;left: 0px;" swiper-animate-effect="fadeOut " swiper-animate-duration="1s" swiper-animate-delay="30s">
						<img src="img/ani/seven10.png" class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="24s" />
					</div>
					<div class="ani02 ani" style="top: 200px;left: 200px;" swiper-animate-effect="fadeOut " swiper-animate-duration="1s" swiper-animate-delay="30s">
						<img src="img/ani/jianyou.png" class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="24s" />
					</div>
					<div class="ani02 ani" style="top: 30%;left: 31%;" swiper-animate-effect="fadeOut " swiper-animate-duration="1s" swiper-animate-delay="30s">
						<img src="img/ani/seven11.jpg" class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="26s" />
					</div>
					<div class="ani02 ani" style="bottom:120px;right: 400px;" swiper-animate-effect="fadeOut " swiper-animate-duration="1s" swiper-animate-delay="30s">
						<img src="img/ani/jianyou.png" class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="26s" />
					</div>
					<div class="ani02 ani" style="bottom: 30px;left: 70%;" swiper-animate-effect="fadeOut " swiper-animate-duration="1s" swiper-animate-delay="30s">
						<img src="img/ani/seven12.jpg" class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="28s" />
					</div>
					<div class="ani02 ani" style="bottom: 300px;left: 15%;" swiper-animate-effect="fadeOut " swiper-animate-duration="1s" swiper-animate-delay="35s">
						<img src="img/ani/zi03.png" class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="31s" />
					</div>
					<div class="ani02 ani" style="bottom: 250px;left: 18%;" swiper-animate-effect="fadeOut " swiper-animate-duration="1s" swiper-animate-delay="35s">
						<img src="img/ani/zi04.png" class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="31s" />
					</div>
					<div class="ani02 ani" style="top: 50px;left: 35%;" swiper-animate-effect="fadeOut " swiper-animate-duration="1s" swiper-animate-delay="35s">
						<img src="img/ani/seven13.jpg" class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="33s" />
					</div>
					<div class="ani02 ani" style="bottom: 30px;left: 75%;" swiper-animate-effect="fadeOut " swiper-animate-duration="1s" swiper-animate-delay="35s">
						<img src="img/ani/seven14.jpg" class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="33s" />
					</div>
					<div class="ani02 ani" style="bottom: 0px;left: 35%;" swiper-animate-effect="fadeOut " swiper-animate-duration="1s" swiper-animate-delay="42s">
						<img src="img/ani/seven15.jpg" class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="36s" />
					</div>
					<div class="ani02 ani" style="top: 50px;left: 45%;" swiper-animate-effect="fadeOut " swiper-animate-duration="1s" swiper-animate-delay="42s">
						<img src="img/ani/zi05.png" class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="36s" />
					</div>
					<div class="ani02 ani" style="top: 35%;left: 10%;" swiper-animate-effect="fadeOut " swiper-animate-duration="1s" swiper-animate-delay="42s">
						<img src="img/ani/yang.png" class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="38s" />
					</div>
					<div class="ani02 ani" style="top: 35%;right: 10%;" swiper-animate-effect="fadeOut " swiper-animate-duration="1s" swiper-animate-delay="42s">
						<img src="img/ani/zhhu.png" class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="39s" />
					</div>
					<div class="ani02 ani" style="top: 250px;left: 13%;" swiper-animate-effect="fadeOut " swiper-animate-duration="1s" swiper-animate-delay="48s">
						<img src="img/ani/zi06.png" class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="43s" />
					</div>
					<div class="ani02 ani" style="top: 310px;left: 15%;" swiper-animate-effect="fadeOut " swiper-animate-duration="1s" swiper-animate-delay="48s">
						<img src="img/ani/zi07.png" class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="43s" />
					</div>
					<div class="ani02 ani" style="bottom: 0px;left: 0px;" swiper-animate-effect="fadeOut " swiper-animate-duration="1s" swiper-animate-delay="48s">
						<img src="img/ani/seven16.jpg" class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="43s" />
					</div>
					<div class="ani02 ani" style="bottom: 0px;right: 100px;" swiper-animate-effect="fadeOut " swiper-animate-duration="1s" swiper-animate-delay="48s">
						<img src="img/ani/seven17.jpg" class="ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="45s" />
					</div>
					<div class="ani02 ani" style="bottom: 0px;left: 30%;" swiper-animate-effect="fadeOut " swiper-animate-duration="1s" swiper-animate-delay="55s">
						<img src="img/ani/me.png" class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="50s" />
					</div>
					<div class="ani02 ani" style="top: 30px;left: 25%;" swiper-animate-effect="fadeOut " swiper-animate-duration="1s" swiper-animate-delay="55s">
						<img src="img/ani/zi08.png" class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="50s" />
					</div>
					<div class="ani02 ani" style="bottom: 35%;left: 0px;" swiper-animate-effect="fadeOut " swiper-animate-duration="1s" swiper-animate-delay="55s">
						<img src="img/ani/seven18.jpg" class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="52s" />
					</div>
					<div class="ani02 ani" style="bottom: 27%;left: 10%;" swiper-animate-effect="fadeOut " swiper-animate-duration="1s" swiper-animate-delay="55s">
						<img src="img/ani/zi09.png" class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="52s" />
					</div>
					<div class="ani02 ani" style="bottom: 35%;right: 20px;" swiper-animate-effect="fadeOut " swiper-animate-duration="1s" swiper-animate-delay="55s">
						<img src="img/ani/seven19.jpg" class="ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="52s" />
					</div>
					<div class="ani02 ani" style="bottom: 27%;right: 10%;" swiper-animate-effect="fadeOut " swiper-animate-duration="1s" swiper-animate-delay="55s">
						<img src="img/ani/zi10.png" class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="52s" />
					</div>
					<img src="img/back.png" class="back" />
				</div>
				<div class="swiper-slide nine" data-hash='slide9' style="background: #f0f0f4;">
					<div class="flowplayer" style="background: url(img/Tv.png) no-repeat;">
						<video controls="controls" style="margin-top: 135px;">
							<source type="video/mp4" src="video/family.mp4"></source>
						</video>
					</div>
					<img src="img/ani/zi12.png" style="position: absolute;top: 30%;right: 10%;"/>

				</div>
				<div class="swiper-slide ten" data-hash='slide10' style="background: #E3F9FD;">
					<img src="img/ten.png" class="heart ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s" swiper-animate-delay="1s" />
					<img src="img/end.gif" />
					<img src="img/hua.png" style="position: absolute;bottom: 10px;right: 10px;" />
				</div>
			</div>
			<!-- Add Pagination -->
			<div class="swiper-pagination swiper-container-v"></div>
		</div>

		<!-- Swiper JS -->
		<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/swiper.animate1.0.2.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery-1.4.4.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/flux.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.js" type="text/javascript"></script>
		<script src="http://www.jq22.com/jquery/1.8.3/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery.slicebox.js"></script>
		<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/PicCarousel.js" type="text/javascript" charset="utf-8"></script>

		<!-- Initialize Swiper -->
		<script>
			$(function() {

				$(".B_Demo").PicCarousel({
					"width": 1000, //幻灯片的宽度
					"height": 500, //幻灯片的高度
					"posterWidth": 520, //幻灯片第一帧的宽度
					"posterHeight": 500, //幻灯片第一张的高度
					"scale": 0.9, //记录显示比例关系
					"speed": 1500, //记录幻灯片滚动速度
					"autoPlay": true, //是否开启自动播放
					"delay": 1000, //自动播放间隔
					"verticalAlign": "middle" //图片对齐位置
				});
				if(!flux.browser.supportsTransitions)
					alert("Flux Slider requires a browser that supports CSS3 transitions");

				window.f = new flux.slider('#slider', {
					pagination: false,
					controls: false,
					transitions: ['turn'],
					autoplay: true
				});

			});

			var swiperV = new Swiper('.swiper-container-v', {
				pagination: '.swiper-pagination-v',
				paginationClickable: true,
				direction: 'vertical'
			});
			var swiper = new Swiper('.swiper-container', {
				pagination: '.swiper-pagination',
				mousewheelControl: true,
				hashnav: true,
				paginationClickable: true,
				slideToClickedSlide: true,
				direction: 'vertical',
				onInit: function(swiper) { //Swiper2.x的初始化是onFirstInit
					swiperAnimateCache(swiper); //隐藏动画元素 
					swiperAnimate(swiper); //初始化完成开始动画
				},
				onSlideChangeEnd: function(swiper) {
					swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
				}
			});
			var swiper1 = new Swiper('.swiper-containers', {
				paginationClickable: true,
				effect: 'cube',
				grabCursor: true,
				cube: {
					shadow: true,
					slideShadows: true,
					shadowOffset: 20,
					shadowScale: 0.94
				}
			});
			var tt = document.querySelector(".time");
			var tj_index = document.querySelector(".r_t_1");
			//			tj_index.onclick = function() {
			//				swiper.slideTo(3, 1000, false);
			//			}
			tt.addEventListener("webkitAnimationStart", function() { //动画结束时事件 
				var timesRun = 0;
				var time = 3;
				var interval = setInterval(function() {
					timesRun += 1;
					if(timesRun === 3) {
						swiper.slideTo(1, 1000, false);
						clearInterval(interval);
					}
					time--;
					tt.innerHTML = time;
				}, 1000);
			}, false);
		</script>
	</body>

</html>